<template>
  <div class="mt1">
    <van-grid :gutter="10">
      <van-grid-item
        v-for="value in menuList"
        :key="value.tage"
        :text="value.tageName"
        @click="goTage(value.tage, value.tageName)"
      >
        <img
          :src="getIconUrl(value.tage)"
          alt="Custom Icon"
          width="40"
          height="40"
        />
        <span>{{ value.tageName }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { Grid, GridItem } from 'vant'
import { useRouter } from 'vue-router'

export default {
  components: {
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
  },
  setup() {
    const menuList = [
      { tage: 1, tageName: '手机' },
      { tage: 2, tageName: '奢侈品' },
      { tage: 3, tageName: '卡券' },
      { tage: 4, tageName: '潮玩' },
      { tage: 5, tageName: '游戏' },
      { tage: 6, tageName: '二手车' },
      { tage: 7, tageName: '电子产品' },
      { tage: 8, tageName: '大甩卖' },
    ]

    const router = useRouter()
    const goTage = (tage, tageName) => {
      router.push({
        name: 'ProductTage',
        params: { product_tage: tage, tage_name: tageName },
      })
    }

    // 定义获取自定义图标路径的函数
    const getIconUrl = (tage) => {
      // 根据标签值选择对应的自定义图标路径
      switch (tage) {
        case 1:
          return require('@/assets/tub/手机.png') // 替换成手机图标路径
        case 2:
          return require('@/assets/tub/奢侈品.png') // 替换成奢侈品图标路径
        case 3:
          return require('@/assets/tub/优惠券.png') // 替换成奢侈品图标路径
        case 4:
          return require('@/assets/tub/潮流计算.png') // 替换成奢侈品图标路径
        case 5:
          return require('@/assets/tub/游戏中心.png') // 替换成奢侈品图标路径
        case 6:
          return require('@/assets/tub/二手车.png') // 替换成奢侈品图标路径
        case 7:
          return require('@/assets/tub/照相机.png') // 替换成奢侈品图标路径
        default:
          return require('@/assets/tub/折扣.png') // 默认图标路径
      }
    }

    return {
      menuList,
      goTage,
      getIconUrl, // 将函数暴露给模板使用
    }
  },
}
</script>

<style scoped>
.mt1 {
  margin-top: 54px;
}
</style>
